﻿@{
    ViewBag.Title = "Cosby, stripes and gradients";
}

<h2>@ViewBag.Message</h2>
<h3>You want crazy backgrounds! You <strong>need</strong> crazy backgrounds!</h3>

<p>Cosby is the code to use for generating striped backgrounds (or gradient edges) in *all* your asp.net/mvc applications.</p>

<p>It's named after <a href='http://en.wikipedia.org/wiki/Bill_Cosby'>Bill Cosby</a>, whose colorful sweaters were bold and memorable, but is in no way affiliated with or endorsed by the great man himself. Just so we're clear.</p>

<p>Use a Cosby image in your stylesheet just like you would any other image. But the url is a little code that describes the stripes you want to see. Follow the examples below and you'll understand.</p>

<p>Or just stop reading this boring description and head straight to the @Html.ActionLink("playground.", "Play", "Home")</p>

<p>Examples:</p>


<h3>Pin stripes</h3>
<p>A thick line then a thin line. (20 pixels of almost black, then 1 pixel of dark gray)</p>
<p>CSS: <input type='text' value="background-image:  url(/Image/Stripes/V/20/222/1/666);" /></p>
<div class='demo' style='background-image: url(/Image/Stripes/V/20/222/1/666);'>
&nbsp;
</div>

<p>Look at that url...</p>
<blockquote>url(/Image/Stripes/V/20/222/1/666);</blockquote>
<p>First we say "Image/" then "Stripes/" -- so far, easy peasy.</p>
<p>Then comes the special Cosby Code. We say "V" or "H" for vertical or horizontal.</p>
<p>And after that there are pairs of numbers--couplets, tuples-- that describe each stripe in our pattern: <br />
&nbsp;&nbsp;&nbsp;&nbsp;20/222 means 20 pixels wide, color 222<br />
&nbsp;&nbsp;&nbsp;&nbsp;1/666     means 1 pixel wide, color 666.
</p>
<p>Put it all together and you have a full url to a very specific pattern of stripes.</p>


<h3>Even stripes</h3>
<p>Red and white, 50 pixels each.</p>
<p>CSS: <input type='text' value="background-image:  url(/Image/Stripes/V/50/FFF/50/F00);" /></p>
<div class='demo' style='background-image: url(/Image/Stripes/V/50/FFF/50/F00);'>
&nbsp;
</div>

<h3>Rainbow stripes</h3>
<p>My daughter insisted I include this one. All your pony sites need this.</p>
<p>Red, orange, yellow, green, blue, purple, each 20 pixels wide.</p>
<p>CSS: <input type='text' value="background-image:  url(/Image/Stripes/V/20/F00/20/F80/20/FF0/20/0F0/20/00F/20/F0F);" /></p>
<div class='demo' style='background-image: url(/Image/Stripes/V/20/F00/20/F80/20/FF0/20/0F0/20/00F/20/F0F);'>
&nbsp;
</div>


<h3>Designer pink and black stripes</h3>

<p>CSS: <input type='text' value="background-image: url(/Image/Stripes/V/7/F5A/10/666/20/000/13/F5A/8/000/5/666/21/FFF/9/F5A/10/000/21/666/16/F5A/5/000/9/FFF/15/F5A/5/000/23/666/24/F5A/17/000/5/F5A);" /></p>
<div class='demo' style='background-image: url(/Image/Stripes/V/7/F5A/10/666/20/000/13/F5A/8/000/5/666/21/FFF/9/F5A/10/000/21/666/16/F5A/5/000/9/FFF/15/F5A/5/000/23/666/24/F5A/17/000/5/F5A);'>
</div>



<a href='http://www.hanselman.com/blog/ModifyingTheDefaultCodeGenerationscaffoldingTemplatesInASPNETMVC.aspx'><img src='/Content/Images/hanselman_cosby.png' class='embedded' /></a>
<p>&nbsp</p><br />
<h3>Horizontal stripes</h3>
<p>If you can't afford <a href='http://channel9.msdn.com/Blogs/matthijs/ASPNET-MVC-2-Ninja-Black-Belt-Tips-by-Scott-Hanselman'>Hanselman's Cosby Sweater</a> (as seen at right), you can just recreate it using some MVC magic.</p>
<p>CSS: <input type='text' value="background-image: url(/Image/Stripes/H/20/C19991/20/386530/20/C19991/20/EECCC9/20/C19991/20/47261C/20/C19991/20/730D14/20/C19991/20/AFB4C8/20/C19991/20/337288/20/C19991/20/89727A/20/C19991/20/C2210F/20/C19991/20/EB612F);" /></p>
<div class='demo' style='clear:right;background-image: url(/Image/Stripes/H/20/C19991/20/386530/20/C19991/20/EECCC9/20/C19991/20/47261C/20/C19991/20/730D14/20/C19991/20/AFB4C8/20/C19991/20/337288/20/C19991/20/89727A/20/C19991/20/C2210F/20/C19991/20/EB612F);'>
&nbsp;
</div>

<h3>Gradients? Ultra-Gradients!</h3>

<p>And it's not just stripes. Cosby does gradients too. Admiteddly there's less call for gradients in this html5-smitten world. But Cosby delivers anyhow.</p>

<p>CSS: <input type='text' value="background-image: url(/Image/Gradient/V/50/F8A/28F);background-repeat:repeat-x;background-color:#28F;" />
<div class='demo' style='background-image: url(/Image/Gradient/V/50/F8A/28F);background-repeat:repeat-x;background-color:#28F;height:100px'>
&nbsp;
</div>

<p>CSS: <input type='text' value="background-image: url(/Image/Gradient/H/50/F8A/28F);background-repeat:repeat-y;background-color:#FFFF88;" /></p>
<div class='demo' style='background-image: url(/Image/Gradient/H/150/F88/FF8);background-repeat:repeat-y;background-color:#FFFF88;height:100px'>
&nbsp;
</div>


<h3>Why? You're asking Why!</h3>
<p>I was messing with MVC and I wanted to try something different with the 'FileResult' of an action. It's swell.</p>
<p>In 2005 (SIX Years ago) I wrote a <a href='http://secretgeek.net/GradientMaker.asp'>Gradient Maker</a> using asp.net 1.0. So I resurrected that idea for Cosby. Also I liked the idea of caching the images on disk. It means that if the code stops working, the images are still there and can be used directly.</p>

